<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>会员登录</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css" type="text/css"/>
    <script src="/static/js/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script src="/static/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="/static/js/common.js" type="text/javascript"></script>
    <!-- 引入自定义css文件 style.css -->
    <link rel="stylesheet" href="/static/css/style.css" type="text/css"/>

    <style>
        body {
            /*margin-top: ;*/
            margin: 20px 0 auto auto;
        }

        .carousel-inner .item img {
            width: 100%;
            height: 300px;
        }

        .container .row div {
            /* position:relative;
                         float:left; */

        }

        font {
            color: #666;
            font-size: 22px;
            font-weight: normal;
            padding-right: 17px;
        }
    </style>


</head>
<body>

<!-- 引入header.jsp -->
<jsp:include page="/WEB-INF/views/header.jsp"></jsp:include>

<div class="container"
     style="width: 100%; height: 460px; background: #092b59 url('/static/images/loginbg2.jpg') no-repeat;">
    <div class="row">
        <div class="col-md-7">
            <!--<img src="./image/login.jpg" width="500" height="330" alt="会员登录" title="会员登录">-->
        </div>

        <div class="col-md-5">
            <div
                    style="width: 440px; border: 1px solid #E7E7E7; padding: 20px 0 20px 30px; border-radius: 5px; margin-top: 60px; background: #fff;">
                <font>会员登录</font>USER LOGIN
                <div>&nbsp;</div>
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="username" class="col-sm-2 control-label">帐号</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="username"
                                   placeholder="请输入用户名" value="${registUsername}"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="password" class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-6">
                            <input type="password" class="form-control" id="password" name="password"
                                   placeholder="请输入密码"/>
                        </div>
                    </div>
                    <div align="left">

                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <div class="checkbox">
                                <label> <input
                                        type="checkbox"> 记住用户名
                                </label>
                                <label onclick="forget()"> 忘记密码 </label>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <input type="button" width="100" value="登录" name="submit" id="login"
                                   style="background: url('/static/images/login.gif') no-repeat scroll 0 0 rgba(0, 0, 0, 0); height: 35px; width: 100px; color: white;">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


<%--找回密码模态框--%>

<div class="modal inmodal fade" id="forgetModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content animated fadeIn">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>

                <h4 class="modal-title" align="center">找回密码</h4>

            </div>

            <div class="modal-body">

                <div class="row">
                    <div class="col-sm-12 " style="height: 40px;line-height: 40px">
                        <label for="tag-name" class="col-sm-3 control-label">请输入用户名：</label>

                        <div class="col-sm-9" style="margin-top: 5px;padding: 0px ">
                            <input class="col-sm-9 input-sm form-control" id="tag-name">
                        </div>
                    </div>
                </div>

                <div class="row" id="addViewQuestion">

                </div>


            </div>

            <div class="modal-footer">
                <button type="button" onclick="forget_getUsername_Send()" class="btn btn-primary" id="forget_submit">
                    提交
                </button>
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
            </div>

        </div>
    </div>
</div>

<%--========end=======--%>

<%--找回密码的重置密码模态框--%>

<div class="modal inmodal fade" id="forgetresetModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content animated fadeIn">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>

                <h4 class="modal-title" align="center">重置密码</h4>

            </div>

            <div class="modal-body">

                <div class="row">
                    <div class="col-sm-12 " style="height: 40px;line-height: 40px">
                        <label for="tag-name" class="col-sm-3 control-label">请输入新密码：</label>

                        <div class="col-sm-9" style="margin-top: 5px;padding: 0px ">
                            <input class="col-sm-9 input-sm form-control" id="passwordNew">
                        </div>
                    </div>
                    <div class="col-sm-12 " style="height: 40px;line-height: 40px">
                        <label for="tag-name" class="col-sm-3 control-label">确认新密码：</label>

                        <div class="col-sm-9" style="margin-top: 5px;padding: 0px ">
                            <input class="col-sm-9 input-sm form-control" id="passwordNew2">
                        </div>
                    </div>
                </div>

                <input type="hidden" id="forgetToken">
                <input type="hidden"  id="username2">


            </div>

            <div class="modal-footer">
                <button type="button" onclick="forget_resetpassword_submit()" class="btn btn-primary">
                    提交
                </button>
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
            </div>

        </div>
    </div>
</div>



<!-- 引入footer.jsp -->
<jsp:include page="/WEB-INF/views/footer.jsp"></jsp:include>


<script>

    function confirmModel(msg) {
        Ewin.confirm({message: msg}).on(function (e) {
            if (!e) {
                return;
            } else {
                return;
            }
        });
    }

    $(document).ready(function () {
        $("#login").click(function () {
            if ($("#username").val() == '' || $("#password").val() == '') {
                confirmModel("用户名和密码不能为空！");
                return false;
            } else {
                $.ajax({
                    type: "post",
                    url: "<c:url value='/user/login'/>",
                    data: {
                        username: $("#username").val(),
                        password: $("#password").val()
                    },
                    dataType: "json",
                    success: function (data) {
                        var result = data;
                        if (result.status == '0') {
                            location.href = "/";
                        } else {
                            confirmModel(result.msg);
                            return false;
                        }

                    },
                    error: function () {
                        confirmModel("请求失败");
                    }
                })
            }
        })
    })

    function forget() {
        $('#forgetModal').modal();
    }

    function forget_getUsername_Send() {
        $.ajax({
            type: "post",
            url: "<c:url value='/user/forget_get_question' /> ",
            data: {
                username: $("#tag-name").val(),
            },
            dataType: "json",
            success: function (data) {
                if (data.status == 0) {
                    $("#addViewQuestion").html('<div class="col-sm-12 " style="height: 40px;line-height: 40px">\n' +
                        '                        <label for="tag-question" class="col-sm-3 control-label">你设置的问题为：</label>\n' +
                        '                         <div class="col-sm-9" style="margin-top: 5px;padding: 0px ">\n' +
                        '                         <input class="col-sm-9 input-sm form-control" id="question" >\n' +
                        '                        </div>\n' +
                        '                    </div>' +
                        '                    <div class="col-sm-12 " style="height: 40px;line-height: 40px">\n' +
                        '                        <label for="tag-answer" class="col-sm-3 control-label">  </label>\n' +
                        '                         <div class="col-sm-9" style="margin-top: 5px;padding: 0px ">\n' +
                        '                            <input class="col-sm-9 input-sm form-control" id="tag-answer" placeholder="请输入你的答案">\n' +
                        '                        </div>\n' +
                        '                    </div>');
                    $("#question").val(data.data );
                    $("#forget_submit").attr("onclick", "submit_username_question_answer()")
                } else {
                    confirmModel(data.msg);
                }
            }
        })

    }


    //回答问题，重置密码
    function submit_username_question_answer() {
        var username = $("#tag-name").val();
        $.ajax({
            type: "post",
            url: "<c:url value='/user/forget_check_answer'/>",
            data: {
                username: $("#tag-name").val(),
                question: $("#question").val(),
                answer: $("#tag-answer").val()
            },
            async:false,
            dataType: "json",
            success: function (data) {
                if (data.status == 0) {
                    //进入下一步找回密码的重置密码  参数:String username,String passwordNew,String forgetToken
                    $('#forgetModal').modal('hide');
                    $('#forgetresetModal').modal('show');

                    $("#username2").val(username);
                    $("#forgetToken").val(data.data);

                } else if (data.status == 1) {
                    confirmModel(data.msg);
                    return false;
                }
            }
        })

    }


    function forget_resetpassword_submit() {
        if($("#passwordNew").val() != $("#passwordNew2").val()){
            confirmModel("两次输入密码不一致，请重新输入");
        }
        $.ajax({
            type:"post",
            url:"<c:url value='/user/forget_reset_password' /> ",
            data:{
                username:$("#username2").val(),
                passwordNew:$("#passwordNew").val(),
                forgetToken:$("#forgetToken").val()
            },
            async:false,
            dataType:"json",
            success:function (res) {
                if(res.status==0){
                    confirmModel(res.msg);
                    $('#forgetresetModal').modal('hide');
                }else{
                    confirmModel(res.msg);
                }
            },
            error:function () {
                confirmModel("请求失败");
            }
        })
    }



</script>
</body>
</html>